<script setup>
import { ref, reactive, computed, watch } from "vue"
import { userApi, addApi } from "@/api/user"
const page = ref(1);  // 分页页码
const tableData = ref([]);  // 表格数据
const tableNum = ref(0); // 总条数

// 表单效验
const rules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
    ],
    gender: [
        { required: true, message: '请输入性别', trigger: 'blur' },
    ],
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
    ],

})

// 表格数据渲染页面
const tableFn = () => {
    // 获取表格数据
    userApi({ page: page.value }).then(res => {
        // console.log(res.data.paginate);
        tableData.value = res.data.paginate.data;
        tableNum.value = res.data.paginate.total;

    })
}
tableFn()

//  单页数据  分页
watch(page, () => {
    tableFn()
})
// console.log(computedTable);

const handleEdit = (index, row) => {
    console.log(index, row)
}
const handleDelete = (index, row) => {
    console.log(index, row)
}

// 弹出框数据
const dialogFormVisible = ref(false); // 判断显示弹出框

const formRef = ref();
const form = reactive({
    username: '',
    password: '',
    email: '',
    gender: '',
    mobile: ''
})

// 点击添加用户
const addForm = (formEl) => {
    formEl.validate((valid) => {
        if (valid) {
            // console.log('formEl', formEl)
            console.log(form);
            addApi(form).then(res => {
                console.log(res);
                // 重新渲染表格数据
                tableFn()
            })
            dialogFormVisible.value = false
        }
    })
}
</script>

<template>
    <div class="tableTop">
        <div>用户列表</div>
        <div>
            <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
        </div>
    </div>

    <!-- table表格 -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" :index="(page - 1) * 10 + 1" label="序号" width="180" />
        <el-table-column label="用户名" prop="username" width="180" />
        <el-table-column label="手机号" prop="mobile" width="180" />
        <el-table-column label="邮箱" prop="email" width="180" />
        <el-table-column label="性别" prop="gender" align="center">
            <template #default="scope">
                <el-tag :type="scope.row.gender == 1 ? 'danger' : 'success'" v-show="scope.row.gender == 1">男</el-tag>
                <el-tag :type="scope.row.gender == 1 ? 'danger' : 'success'" v-show="scope.row.gender == 2">女</el-tag>
                <el-tag :type="scope.row.gender == 1 ? 'danger' : 'success'" v-show="scope.row.gender == 3">保密</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" align="center">
            <template #default="scope">
                <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{
                    scope.row.role === 1 ? "启用" : "禁用"
                }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template #default="scope">
                <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination v-model:current-page="page" background layout="prev, pager, next" :total="tableNum" />

    <!-- 弹出框 -->
    <el-dialog v-model="dialogFormVisible" title="添加用户">
        <el-form :model="form" ref="formRef" :rules="rules">
            <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="用户名" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="form.password" placeholder="密码" />
            </el-form-item>
            <el-form-item prop="email">
                <el-input v-model="form.email" placeholder="邮箱" />
            </el-form-item>
            <el-form-item prop="gender">
                <el-select v-model="form.gender" placeholder="请选择性别">
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="女" :value="2"></el-option>
                    <el-option label="保密" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="mobile">
                <el-input v-model="form.mobile" placeholder="手机号" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addForm(formRef)">
                    添加
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
.tableTop {
    background-color: #fff;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-table {
    margin-top: 15px;
}
</style>